<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
    <title>项目总体情况看板</title>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css"
    />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>
    <style>
        .high-line {
            cursor: pointer;
            stroke: #ffd123;
            stroke-width: 3px;
            animation: rot 5s linear 1;
            stroke-dasharray: 0 400;
            stroke-dashoffset: 400;
            animation-fill-mode: forwards;
            transition: all 2s;
        }

        @keyframes rot {
            100% {
                stroke-dasharray: 400 0;
            }
        }
        .ing-high-line {
            cursor:pointer;
            stroke: #d507cb;
            stroke-width: 3px;
            stroke-dasharray: 0 400;
            animation: roting 8s linear 1;
            animation-fill-mode: forwards;
        }

        @keyframes roting {
            99% {
                stroke-dasharray: 400 0;
            }
            100% {
                stroke-dasharray: 5 5;
            }
        }
    </style>
</head>
<body>
<div id="app" style="height: 100%">
    <van-cell-group>
        <van-cell title="项目建设概况" size="large"/>
    </van-cell-group>
    <div style="width: 100%;">
        <table style="width: 100%">
            <tr>
                <td>
                    <div class="parent-box">
                        <img src="./logo.png" class="photo" alt="...">
                        <span class="intro">总投资金额<br/>4547亿元</span>
                    </div>
                </td>
                <td>
                    <div class="parent-box">
                        <img src="./logo.png" class="photo" alt="...">
                        <span class="intro">总建设规模<br/>4876公里</span>
                    </div>
                </td>
                <td>
                    <div class="parent-box">
                        <img src="./logo.png" class="photo" alt="...">
                        <span class="intro">在建项目<br/>6个</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="parent-box">
                        <img src="./logo.png" class="photo" alt="...">
                        <span class="intro">筹建项目<br/>12个</span>
                    </div>
                </td>
                <td>
                    <div class="parent-box">
                        <img src="./logo.png" class="photo" alt="...">
                        <span class="intro">已通车项目<br/>32个</span>
                    </div>
                </td>
                <td></td>
            </tr>
        </table>
    </div>
    <van-cell-group>
        <van-cell title="项目分布" size="large"/>
    </van-cell-group>
    <div>
        <van-tabs v-model="activeName" @click="onChangeTab">
            <van-tab title="在建项目" name="在建项目">
                <select v-model="valueIng" style="font-size: medium; margin: 10px; width: 200px;">
                    <option v-for="option in optionIng" v-bind:value="option.text">
                        {{ option.text }}
                    </option>
                </select>
                <svg width="546" height="403" id="map"
                     style="background:url(highb2.png) no-repeat; background-size:100% 100%;">
                    <g id="highmap">
                        <path class="ing-high-line ing-high-line3" id="ing-line3" fill="transparent" d="M296,276,L296,276,323,271,Q332,236,344,209,Q357,184,356,164"></path>
                        <path class="ing-high-line ing-high-line4" id="ing-line4" fill="transparent" d="M165,101,Q161,107,164,112,C171,122,161,134,161,137,S160,140,163,145,Q168,152,164,159,Q163,165,166,172,Q161,176,162,182,C158,187,152,191,154,199"></path>
                        <path class="ing-high-line ing-high-line5" id="ing-line5" fill="transparent" d="M406,295,Q396,280,420,236,Q423,229,420,214,Q424,194,427,183,Q433,176,435,158,Q438,146,424,133"></path>
                        <path class="ing-high-line ing-high-line6" id="ing-line6" fill="transparent" d="M388,373,L388,374,388,358"></path>
                        <path class="ing-high-line ing-high-line7" id="ing-line7" fill="transparent" d="M292,266,Q293,251,301,242,Q319,234,323,222,Q325,196,330,184,Q335,170,343,151"></path>
                        <path class="ing-high-line ing-high-line8" id="ing-line8" fill="transparent" d="M373,137,Q414,141,434,128"></path>
                        <path class="ing-high-line ing-high-line9" id="ing-line9" fill="transparent" d="M165,101,Q184,117,205,111"></path>
                    </g>
                </svg>
            </van-tab>
            <van-tab title="筹建项目" name="筹建项目">
                <select v-model="valueIng" style="font-size: medium; margin: 10px; width: 200px;">
                    <option v-for="option in optionIng" v-bind:value="option.text">
                        {{ option.text }}
                    </option>
                </select>
                <svg width="546" height="403" id="map"
                     style="background:url(highb2.png) no-repeat; background-size:100% 100%;">
                    <g id="highmap">
                        <path class="high-line high-line3" id="line12" fill="transparent" d="M158,194,C165,200,172,218,157,238,L147,248,129,262"></path>

                    </g>
                </svg>
            </van-tab>
            <van-tab title="已通车项目" name="已通车项目">
                <select v-model="valueIng" style="font-size: medium; margin: 10px; width: 200px;">
                    <option v-for="option in optionIng" v-bind:value="option.text">
                        {{ option.text }}
                    </option>
                </select>
                <svg width="546" height="403" id="map"
                     style="background:url(highb2.png) no-repeat; background-size:100% 100%;">
                    <g id="highmap">
                        <path class="high-line high-line3" id="line3" fill="transparent" d="M467,244,L467,244,476,240,Q485,243,493,238"></path>
                        <path class="high-line high-line3" id="line4" fill="transparent" d="M82,130,C88,142,100,161,130,173,L130,173,158,194"></path>
                        <path class="high-line high-line3" id="line5" fill="transparent" d="M183,76,L183,76,208,118,C218,136,234,142,238,145"></path>
                        <path class="high-line high-line3" id="line6" fill="transparent" d="M238,145,Q244,151,251,148,Q257,146,271,150,Q285,154,300,154"></path>
                        <path class="high-line high-line3" id="line7" fill="transparent" d="M207,311,L207,311,219,320,L219,320,285,345,Q290,346,295,347"></path>
                        <path class="high-line high-line3" id="line8" fill="transparent" d="M372,382,Q391,358,394,338,L394,338,403,311,Q414,303,411,293,Q414,290,419,283"></path>
                        <path class="high-line high-line3" id="line9" fill="transparent" d="M323,271,C328,281,326,292,324,302,L324,302,323,344,Q311,361,314,378"></path>
                        <path class="high-line high-line3" id="line10" fill="transparent" d="M238,146,C240,171,255,188,266,212"></path>
                        <path class="high-line high-line3" id="line11" fill="transparent" d="M267,289,Q275,292,283,288,Q296,283,297,278,Q301,269,291,265,Q279,265,264,269,Q259,269,254,270,Q252,271,253,275,Q256,281,267,289"></path>

                        <path class="high-line high-line3" id="line13" fill="transparent" d="M88,234,C102,248,116,259,129,262"></path>
                        <path class="high-line high-line3" id="line14" fill="transparent" d="M344,209,Q357,209,368,215,L368,215,379,221"></path>
                        <path class="high-line high-line3" id="line15" fill="transparent" d="M446,40,Q451,54,476,53"></path>
                        <path class="high-line high-line3" id="line16" fill="transparent" d="M268,227,Q268,227,281,225,S296,220,309,213,L309,213,324,211,Q344,209,344,209"></path>
                        <path class="high-line high-line3" id="line17" fill="transparent" d="M218,235,L218,235,238,225,Q238,225,268,227"></path>
                        <path class="high-line high-line3" id="line18" fill="transparent" d="M350,170,Q355,174,364,177,Q372,182,375,191,Q378,207,380,221,Q381,223,385,228"></path>
                        <path class="high-line high-line3" id="line19" fill="transparent" d="M129,262,L143,267,153,274,C181,291,200,310,207,311"></path>
                        <path class="high-line high-line3" id="line20" fill="transparent" d="M473,267,Q469,263,471,252,L471,252,467,244"></path>
                        <path class="high-line high-line3" id="line21" fill="transparent" d="M365,47,L365,47,352,84,L352,84,346,107,Q335,117,342,128,L342,128,343,151,Q344,160,350,170"></path>
                        <path class="high-line high-line3" id="line22" fill="transparent" d="M355,163,L355,163,399,191,C402,195,407,201,415,206,Q428,209,446,210,Q458,213,461,219,Q472,228,481,225"></path>
                        <path class="high-line high-line3" id="line23" fill="transparent" d="M487,230,Q496,222,493,216,Q487,208,481,223"></path>
                        <path class="high-line high-line3" id="line24" fill="transparent" d="M160,195,Q175,187,180,178,Q190,170,201,172,C205,165,208,157,213,152,C222,146,231,144,239,146"></path>
                        <path class="high-line high-line3" id="line25" fill="transparent" d="M108,274,Q123,272,130,262"></path>
                        <path class="high-line high-line3" id="line26" fill="transparent" d="M296,276,L296,276,323,271,Q332,236,344,209,Q357,184,356,164"></path>
                        <path class="high-line high-line3" id="line27" fill="transparent" d="M165,101,Q161,107,164,112,C171,122,161,134,161,137,S160,140,163,145,Q168,152,164,159,Q163,165,166,172,Q161,176,162,182,C158,187,152,191,154,199"></path>
                        <path class="high-line high-line3" id="line28" fill="transparent" d="M147,306,Q176,320,207,325"></path>
                        <path class="high-line high-line3" id="line29" fill="transparent" d="M406,295,Q396,280,420,236,Q423,229,420,214,Q424,194,427,183,Q433,176,435,158,Q438,146,424,133"></path>
                        <path class="high-line high-line3" id="line30" fill="transparent" d="M388,373,L388,374,388,358"></path>
                        <path class="high-line high-line3" id="line31" fill="transparent" d="M292,266,Q293,251,301,242,Q319,234,323,222,Q325,196,330,184,Q335,170,343,151"></path>
                        <path class="high-line high-line3" id="line32" fill="transparent" d="M356,164,Q364,145,373,137,Q382,125,396,111"></path>
                        <path class="high-line high-line3" id="line33" fill="transparent" d="M396,111,Q397,99,412,92"></path>
                        <path class="high-line high-line3" id="line34" fill="transparent" d="M266,288,Q276,288,270,284"></path>
                        <path class="high-line high-line3" id="line35" fill="transparent" d="M373,137,Q414,141,434,128"></path>
                        <path class="high-line high-line3" id="line36" fill="transparent" d="M172,351,Q181,342,193,332,L193,332,228,316,Q245,308,249,296,Q253,292,257,290"></path>
                        <path class="high-line high-line3" id="line37" fill="transparent" d="M412,92,Q421,85,421,74"></path>
                        <path class="high-line high-line3" id="line38" fill="transparent" d="M479,186,Q477,172,475,157"></path>
                        <path class="high-line high-line3" id="line39" fill="transparent" d="M449,139,Q468,146,475,157,L475,157,493,157,Q502,157,510,162"></path>
                        <path class="high-line high-line3" id="line40" fill="transparent" d="M119,203,Q131,199,145,200,Q149,198,154,199"></path>
                        <path class="high-line high-line3" id="line41" fill="transparent" d="M154,199,Q156,198,166,202,L166,202,218,235,Q221,237,226,243,L226,243,246,266"></path>
                        <path class="high-line high-line3" id="line42" fill="transparent" d="M463,24,Q469,20,477,18"></path>
                        <path class="high-line high-line3" id="line43" fill="transparent" d="M300,154,Q324,153,343,151"></path>
                        <path class="high-line high-line3" id="line44" fill="transparent" d="M266,212,L266,212,262,241,Q260,251,268,259,Q269,262,272,268"></path>
                        <path class="high-line high-line3" id="line45" fill="transparent" d="M343,151,Q354,148,364,150"></path>
                        <path class="high-line high-line3" id="line46" fill="transparent" d="M246,266,L246,266,252,274"></path>
                        <path class="high-line high-line3" id="line47" fill="transparent" d="M165,101,Q184,117,205,111"></path>

                    </g>
                </svg>
            </van-tab>
        </van-tabs>
    </div>
    <van-cell-group>
        <van-cell :title="activeName" size="large"/>
    </van-cell-group>
    <div v-for="item in detailIng" :key="item.sno">
        <van-cell-group>
            <van-cell :title="item.name" :value="item.value"/>
        </van-cell-group>
    </div>
</div>
</body>
<script>
    // 在 #app 标签下渲染一个按钮组件
    new Vue({
        el: '#app',
        data() {
            return {
                activeName: '在建项目',
                valueIng: '全部项目',
                optionIng: [
                    {text: '全部项目', value: 0},
                    {text: '项目1', value: 1},
                    {text: '项目2', value: 2},
                ],
                detailIng: [
                    {sno: 1, name: '投资金额(亿元)', value: '846'},
                    {sno: 2, name: '建设规模(公里)', value: '771'},
                    {sno: 3, name: '累计完成(亿元)', value: '406'},
                    {sno: 4, name: '投资进度', value: '46%'},
                ],
                valuePreparation: 0,
                optionPreparation: [
                    {text: '全部项目', value: 0},
                    {text: '项目1', value: 1},
                    {text: '项目2', value: 2},
                ],
                valueFinish: 0,
                optionFinish: [
                    {text: '全部项目', value: 0},
                    {text: '项目1', value: 1},
                    {text: '项目2', value: 2},
                ],
            }
        },
        methods: {
            onChangeTab(name, title) {
                console.log(name, title);
            },

        }
    });

    // 调用函数组件，弹出一个 Toast
    vant.Toast('提示');

    // 通过 CDN 引入时不会自动注册 Lazyload 组件
    // 可以通过下面的方式手动注册
    Vue.use(vant.Lazyload);
</script>
<style>
    .parent-ox {
        vertical-align: middle;
        text-align: left;
    }

    .photo {
        vertical-align: middle;
    }

    .intro {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        font-size: small;
    }
</style>

</html>